<template>
  <div>
    <div class="echart-con">
      <e-charts v-for="list in chartList" :key="list.id" class="box"
                :style="'flex: 1 0 auto; flex-basis:'+form.content.boxWidth+'px;'"
                :options="list"
                :autoResize="true" ref="chart"></e-charts>
    </div>
  </div>
</template>

<script>
  import echartType from '../../mixins/echartType.js';
  import ECharts from 'vue-echarts/components/ECharts.vue';

  export default {
    name: 'EchartRadar',
    props: ['form'],
    mixins: [echartType],
    components: {ECharts},
    methods: {
      init() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (!Array.isArray(this.form.originalData)) {
            return {};
          }
          let option = JSON.parse(JSON.stringify(this.form));
          option.tooltip = this.form.tooltip;
          option.xAxis.show = false;
          option.yAxis.show = false;
          this.chartList = [];

          if (this.form.plot.value.length === 0 || this.form.plot.category.length === 0) {
            return false;
          } else {
            this.form.plot.category.forEach(item => {
              let obj = {};
              let radarOptions = this.radarData(item);
              obj = Object.assign({}, option, radarOptions);
              this.chartList.push(obj);
            });
          }
        }, 50);
      },
      radarData(categoryObj) {
        let axisX = categoryObj.name ? this.axisFun(categoryObj.name) : [];
        let orient = 'horizontal';
        let top = 'top';
        let left = 'left';
        switch (this.form.legend.location) {
          case '0':
            orient = 'horizontal';
            top = 'top';
            left = 'left';
            break;
          case '1':
            orient = 'horizontal';
            top = 'top';
            left = 'center';
            break;
          case '2':
            orient = 'horizontal';
            top = 'top';
            left = 'right';
            break;
          case '3':
            orient = 'vertical';
            top = 'middle';
            left = 'left';
            break;
          case '4':
            orient = 'vertical';
            top = 'middle';
            left = 'right';
            break;
          case '5':
            orient = 'horizontal';
            top = 'bottom';
            left = 'left';
            break;
          case '6':
            orient = 'horizontal';
            top = 'bottom';
            left = 'center';
            break;
          case '7':
            orient = 'horizontal';
            top = 'bottom';
            left = 'right';
            break;
        }
        let radarOption = {
          legend: {
            show: this.form.legend.show,
            type: this.form.legend.type,
            orient: orient,
            top: top,
            left: left,
            data: []
          },
          tooltip: {
            name: categoryObj.name,
            show: this.form.tooltip.show === 1 ? 1 : 0,
            formatter: function (params) {
              let value = params.name + '<br/>';
              params.value.forEach((item, index) => {
                value += axisX[index] + ':' + (item * 100).toFixed(2) + '%' + '<br/>';
              });
              return value;
            }
          },
          radar: {
            indicator: [],
            center: ['50%', '45%'],
            radius: '50%'
          },
          series: []
        };

        axisX.forEach(item => {
          let obj = {};
          obj.name = item;
          obj.max = 1;
          radarOption.radar.indicator.push(obj);
        });

        let arr = [];
        this.form.plot.value.forEach(value => {
          radarOption.legend.data.push(value.title);
          let max = Math.max.apply(null, this.axisFun(value.name));
          let data = [];
          let objData = {};
          this.form.originalData.forEach(list => {
            axisX.forEach((item, index) => {
              if (item === list[categoryObj.name]) {
                let percent = list[value.name] / max.toFixed(2);
                data[index] = percent;
              }
            });
          });
          objData.value = data;
          objData.name = value.title;
          arr.push(objData);
        });

        let obj = {
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          itemStyle: {normal: {areaStyle: {type: 'default'}}},
          markPoint: {
            silent: true,
            symbol: 'triangle',
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            },
            data: [
              {
                x: '50%',
                y: '50%',
                value: categoryObj.title,
                label: {
                  normal: {
                    show: true,
                    position: 'bottom',
                    distance: 90,
                    formatter: function (params) {
                      return params.value;
                    },
                    color: '#000'
                  }
                }
              }
            ]
          },
          data: arr
        };
        radarOption.series.push(obj);
        return radarOption;
      }
    }
  };
</script>
